<template>
    <div class="dept-item">
        <div class="dept-name" :style="{paddingLeft: level * 24 + 'px'}" @click="dept.isClick = !dept.isClick">
            <template v-if="dept.children">
                <CaretRightOutlined v-if="!dept.isClick" class="expand-icon"/>
                <CaretDownOutlined v-else class="expand-icon"/>
            </template>
            <span class="title">部门:{{ dept.name }}</span>
        </div>
        <Transition name="slide-fade">
            <div class="user-list" v-if="dept.users && dept.users.length > 0" :style="{paddingLeft: (level + 1) * 24 + 20 + 'px'}">
                <div class="user-item" v-for="user in dept.users" :key="user.id">
                    <a-checkbox  v-model:checked="user.checked" @change="onUserCheck(user)">
                        用户:{{ user.realName }}
                    </a-checkbox>
                </div>
            </div>
        </Transition>
        <Transition name="slide-fade">
            <div v-if="dept.children && dept.isClick" class="children-container">
                <template v-for="child in dept.children" :key="child.id">
                    <user-item :dept="child" :level="level + 1" :onUserChange="onUserChange"/>
                </template>
            </div>
        </Transition>
    </div>
</template>

<script setup lang="ts">
import userItem from './userItem.vue'
const props = withDefaults(defineProps<{
    dept:any,
    level?:number,
    onUserChange:Function
}>(),{
    level:0
})


const onUserCheck = (e:any)=>{
    props.onUserChange(e)
}
</script>

<style lang='scss' scoped>
.dept-item{
    .dept-name{
        display: flex;
        align-items: center;
        padding: 8px 0;
        cursor: pointer;
        transition: all 0.3s;
        
        &:hover {
            background-color: #f5f5f5;
        }
        
        .expand-icon {
            margin-right: 8px;
            color: #666;
            font-size: 12px;
            transition: transform 0.3s ease;
        }
        
        .title{
            transition: all 0.3s;
            cursor: pointer;
            font-weight: 500;
            
            &:hover{
                color: #1890ff;
            }
        }
    }
    
    .user-list {
        .user-item {
            padding: 6px 0;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            
            &:hover {
                color: #1890ff;
                background-color: #f0f8ff;
                padding-left: 8px;
            }
        }
    }
    
    .children-container {
        overflow: hidden;
    }
}

// 展开/收缩过渡效果
.slide-fade-enter-active,
.slide-fade-leave-active {
    transition: all 0.3s ease;
}

.slide-fade-enter-from,
.slide-fade-leave-to {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
}

.slide-fade-enter-to,
.slide-fade-leave-from {
    opacity: 1;
    transform: translateY(0);
    max-height: 999px; 
}
</style>